<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Magic Compass Alipay Barcode Merchant Demo</title>
<link href="<%=request.getContextPath()%>/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<script src="<%=request.getContextPath()%>/resources/jquery/jquery-2.2.1.min.js"></script>
<script src="<%=request.getContextPath()%>/resources/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var focusItem = "B"; // barcode
	$('#barcodePayForm').submit(function (e) {
		e.preventDefault();
		if(!$("#totalAmt").val()){
			$("#warningModalContent").text("Total amount should not empty.");
			$("#warningModal").modal();
			focusItem = "A"; // totalAmt
		}else if(!$.isNumeric($("#totalAmt").val())){
			$("#warningModalContent").text("Please input numeric only.");
			$("#warningModal").modal();
			focusItem = "A"; // totalAmt
		}else if(!$("#barcode").val()){
			$("#warningModalContent").text("Please scan customer barcode before make payment.");
			$("#warningModal").modal();
			focusItem = "B"; // barcode
		}else{
			$("#waitingModal").modal({
			  backdrop: 'static',
			  keyboard: false
			});
			//alert("ok");
			send2Alipay();
		}
	});
	
	$('#warningModal').on('hidden.bs.modal', function(event) {
		if("A" == focusItem){
			$("#totalAmt").select();
			$("#totalAmt").focus();
		}else{
			$("#barcode").select();
			$("#barcode").focus();
		}
	});
});
function send2Alipay(){
	$.ajax({
		url: '<%=request.getContextPath()%>/alipayBarcodePaymentController/alipayBarcodePayment',
		data: {
			customerALIPAYBarcode: $("#barcode").val(),
			merchantTransactionId: $("#merchantTransactionId").val(),
			totalAmt: $("#totalAmt").val(),
		},
		success: function(data) {
			if(data.redirect){
				window.location = data.redirectURL+"?resultCode="+data.responseResultCode+"&resultReason="+data.responseResultReason;
			}
		},
		type: 'GET'
	});
}
</script>
</head>
<body>
<div class="container">
	<div class="page-header">
		<h1 class="text-center">Barcode Scan Page</h1>
	</div>
	<br><br><br>
	<div class="page-header">
		<h3 class="text-center">Purchase Summary</h3>
	</div>
	<br>
	<form method="POST" action="#" id="barcodePayForm">
		<table class="table table-bordered table-condensed table-striped">
				<tr>
			        <td class="lead">Merchant Name</td>
		            <td><%=request.getAttribute("merchantName") %></td>
		        </tr>
				<tr>
			        <td class="lead">Total Amount</td>
			        <td>
			       		<div class="col-xs-4">
			        		<input type="text" class="form-control input-small" id="totalAmt" name="totalAmt" value="<%=request.getAttribute("totalAmt") %>">
			        	</div>
			        </td>
		        </tr>
	    </table>
	    <div class="row">
	    	<div class="col-md-4 text-right">&nbsp;</div>
			<div class="col-md-4">
				<input type="text" class="form-control" id="barcode" name="barcode" placeholder="Please scanner customer barcode" autofocus>
				<input type="hidden" id="merchantTransactionId" name="merchantTransactionId" value="<%=request.getAttribute("merchantTransactionId") %>">
			</div>
			<div class="col-md-4">&nbsp;</div>
		</div>
		
		<br>
	    <div class="row">
	    	<div class="col-md-4">&nbsp;</div>
			<div class="col-md-4">
				<button type="submit" class="btn btn-primary btn-md btn-block" name="submitButton" id="submitButton">Submit</button>
			</div>
			<div class="col-md-4">&nbsp;</div>
		</div>
		
	</form>
	
	<!-- Modal barcodeIsEmptyModal-->
	<div id="warningModal" class="modal fade" role="dialog">
	  <div class="modal-dialog">	
	    <!-- Modal content-->
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal">&times;</button>
	        <h4 class="modal-title">Error</h4>
	      </div>
	      <div class="modal-body alert-danger">
	        <p id="warningModalContent"></p>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	      </div>
	    </div>	
	  </div>
	</div>
	
	<!-- Modal waitingModal-->
	<div id="waitingModal" class="modal fade" role="dialog">
	  <div class="modal-dialog">	
	    <!-- Modal content-->
	    <div class="modal-content">
	      <div class="modal-header">
	        <h4 class="modal-title">Please wait</h4>
	      </div>
	      <div class="modal-body">
	        <p>Please wait until transaction finished. Once it finished, this page will redirect to result page.</p>
	      </div>
	    </div>	
	  </div>
	</div>
	
</div>
</body>
</html>